
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/myshop" style="color: #409eff;">我的账户</router-link>>
            消费记录
          </div>
               
		  <div class="hei10"></div>
          
                <div class="title">消费记录</div>
                <div class="con" v-loading="loading">
                    <div class="flex">
                      <el-select v-model="type" placeholder="请选择" clearable style="margin-right: 20px;">
                        <el-option label="平台福利" value="benefit"></el-option>
                        <el-option label="订单扣费" value="plan_order_free"></el-option>
                        <el-option label="增值服务" value="vdService"></el-option>
                        <el-option label="身份证校验" value="identityVerify"></el-option>
                        <el-option label="短信通知" value="smsNotify"></el-option>
                      </el-select>
                        <el-date-picker v-model="time" @change="choosetime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        <el-button type="danger" style="padding: 9px 15px" size="small" @click="getlist">查询</el-button>
                        <el-button type="danger" plain size="small" @click="exportData">导出明细</el-button>
                    </div>

                    <div class="list">
						<!-- <div class="th">序号</div> -->
						<div class="th">订单ID</div>
						<div class="th">分销商</div>
                        <div class="th">订单来源</div>
                         <div class="th">增值收费</div>
                        <div class="th">外部订单号</div>
						<!-- <div class="th">产品编码</div> -->
						<div class="th">费用</div>
                        <div class="th">扣费时间</div>
					</div>
					<div class="list" v-for="item in list" :key="item.id">
						<!-- <div class="td">{{item.order_id}}</div> -->
						<div class="td">{{item.order_id}}</div>
						<div class="td">{{item.merchant_name}}</div>
						<div class="td">{{item.source}}</div>
            <div class="td">{{item.label}}</div>
                        <div class="td">{{item.source_id}}</div>
						<!-- <div class="td">{{item.mobile}}</div> -->
                        <div class="td">{{item.amount}}</div>
						<div class="td">{{item.created_at}}</div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <!-- <foot></foot> -->
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot
        },
        name: "consumption",
        data() {
            return {
                pagesize:20,
                total:0,
                page:1,
                list:[],
                loading:true,
                start:"",
                end:"",
                time:"",
              type:""

            }
        },
        created() {
            this.getlist()
        },
        mounted() {

        },
        methods: {
          exportData(){
            this.$router.push({
              path: '/consumption_export'
            })
          },
            //时间
            choosetime:function(){
                if( this.time == null){
                    this.start = ""
                    this.end = ""
                }else{
                    this.start = this.time[0]
                    this.end = this.time[1]
                }
            },
            fanye:function(page){
                this.loading = true
				this.page = page
				this.getlist()
			},
            getlist:function(){
                this.loading = true
                axios.get('/api/plan-market/shop/transaction?page='+this.page+'&start='+this.start+'&end='+this.end+'&type='+this.type)
                    .then(response => {
                            if(response.data.msg.code == 0){
                                this.list = response.data.data.data
                                this.total = response.data.data.total
                                this.loading = false
                            }else{
                                this.$message.error(response.data.msg.info);
                            }
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .index{
    
                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
            
            .con{  padding: 20px;
                .flex{ display: flex; margin-bottom: 20px;
                    .el-date-editor{ margin-right: 20px;}
                }
                .list{
					display: flex; text-align: center; color: #727272; line-height: 45px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; overflow: hidden; }
				}
				.el-pagination{ text-align: right; margin: 20px 0;}
            }

    	
    }
</style>
